import Select from "react-select";

import selectBg from '@/assets/componemts/custom-select/select_bg.png'
import areaMenuBg from '@/assets/componemts/custom-select/area_menu.png'
import elevatorLocationBg from '@/assets/componemts/custom-select/elevator_location.png'
import elevatorAgeBg from '@/assets/componemts/custom-select/elevator_age.png'
import elevatorTypeBg from '@/assets/componemts/custom-select/elevator_type.png'
import { useMemo } from "react";

const CustomSelect = ({ options, placeholder, type, onChange }: {
    options: Record<string, string>[],
    placeholder: string,
    type: string,
    onChange: () => void
}) => {
    const menuBg = useMemo(() => {
        switch (type) {
            case 'areaMenu': {
                return areaMenuBg
            }
            case 'elevatorLocation': {
                return elevatorLocationBg
            }
            case 'elevatorAge': {
                return elevatorAgeBg
            }
            case 'elevatorType': {
                return elevatorTypeBg
            }
            default:
                return ''
        }
    }, [type])

    return (
        <Select
            options={options}
            placeholder={placeholder}
            onChange={onChange}
            styles={{
                control: (styles) => {
                    return {
                        ...styles,
                        backgroundImage: `url('${selectBg}')`,
                        backgroundRepeat: 'no-repeat',
                        backgroundSize: 'contain',
                        border: '1px rgb(0, 20, 21) solid',
                        borderRadius: '3px',
                        width: '20rem',
                        minHeight: 'unset',
                        height: '5.5rem',
                        fontSize: '1.8rem',
                        color: '#fff',
                        opacity: 1,
                        ":hover": {
                            borderColor: 'hsl(0, 0%, 80%)'
                        }
                    }
                },
                placeholder: (styles) => ({
                    ...styles,
                    color: '#fff'
                }),
                singleValue: (styles) => ({
                    ...styles,
                    color: '#fff'
                }),
                menu: (styles) => ({
                    ...styles,
                    color: '#fff',
                    width: '30rem',
                    left: '-5rem',
                    bottom: '4.5rem',
                    paddingTop: '5rem',
                    paddingBottom: '1rem',
                    backgroundColor: 'transparent',
                    backgroundImage: `url('${menuBg}')`,
                    backgroundRepeat: 'no-repeat',
                    backgroundSize: 'contain',
                    maxHeight: 'unset',
                    overflow: 'hidden'
                }),
                option: (styles, state) => {
                    return {
                        height: '3.9rem',
                        fontSize: '1.6rem',
                        fontWeight: 'blod',
                        width: '90%',
                        margin: '0 auto',
                        lineHeight: '3.9rem',
                        textIndent: '1rem',
                        backgroundColor: state.isFocused ? '#095b4f' : styles.backgroundColor,
                        ":hover": {
                            backgroundColor: '#095b4f'
                        },
                    }},
                menuList: (styles) => {
                    return {
                        ...styles,
                        backgroundColor: 'transparent',
                        maxHeight: 'unset',
                    }
                },
                menuPortal: (styles, state) => {
                    console.log('state', state);
                    return {
                        ...styles,
                    }
                },
                indicatorSeparator: (styles) => ({
                    ...styles,
                    display: 'none'
                }),
                dropdownIndicator: (styles) => ({
                    ...styles,
                    display: 'none'
                }),
            }}
            menuPlacement="top"
        />
    )
}

export default CustomSelect